// Local namespace
(function( $ ) {
// Namespace constants
var PAGE_TITLE_PREF = 'JS Application Design : ';
// Application namespace
var App = function() {
      // Application event handlers
      var _handler = {
          introOnChange: function(e, node) {
           document.title = PAGE_TITLE_PREF + $(node).attr('title');
          }
      };
      return {
          init : function() {
            App.syncUI();
            // Invoke the first instance of Intro
            App.Intro({boundingBox: $('div.intro')}).getInstance();
          },
          syncUI : function() {
             // Application subscribes for a custom event
            $(document).bind('intro-onchange', _handler.introOnChange);
          }
      }
}();
  //  Module
  App.Intro = function(settings) {
      // Module constants
      var MYCONSTANT = null;
      // Private properties
      var  _a = null,
           _b = null;
      // event handlers
      var _handler = {
            onclick : function(e) {
                // e.data is this
                e.data.node.boundingBox.css('background-image', 'url(./assets/'
                    + $(this).attr('id') + '.jpg)');
                // Example of communication module to module, module to application
                $(document).trigger('intro-onchange', [this]);
            }
      };
      return $.jsa.extend({
        name : 'Intro',
        HTML_PARSER : {
            toolbar : 'div.toolbar'
        },
        init : function() {
        },
        renderUI : function() {            
        },
        syncUI : function() {
            this.node.toolbar.find('li').bind('click.intro', this, _handler.onclick);
        }
      }, $.jsa.WidgetAbstract, settings);
  };


// Document is ready
$(document).bind('ready.app',App.init);

})( jQuery );

